<template>
  <view class="kimi-container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left">
        <image class="logo" src="/static/logo.svg" mode="aspectFit" />
        <text class="title">VKG AI</text>
        <button class="file-manager-btn" @tap="showFileManager">
          <text class="file-icon">📁</text>
        </button>
      </view>
      <view class="nav-right">
        <button class="nav-btn" @tap="showSettings">
          <image class="user-avatar" src="/static/VK_MDY_lightmode.png" mode="aspectFit" />
        </button>
      </view>
    </view>

    <!-- 聊天区域 -->
    <scroll-view class="chat-area" scroll-y :scroll-top="scrollTop" :scroll-into-view="scrollIntoView" @scrolltoupper="loadMoreMessages">
      <view class="messages-container">
        <!-- 欢迎消息 -->
        <view v-if="messages.length === 0" class="welcome-section">
          <image class="welcome-logo" src="/static/logo.svg" mode="aspectFit" />
          <text class="welcome-text">你好，我是 VKG AI</text>
          <text class="welcome-subtitle">有什么我可以帮你的吗？</text>
        </view>

        <!-- 消息列表 -->
        <view v-for="(message, index) in messages" :key="index" class="message-item" :class="message.type">
          <view class="avatar" :class="message.type">
            <image v-if="message.type === 'ai'" src="/static/logo.svg" mode="aspectFit" />
            <text v-else>👤</text>
          </view>
          <view class="message-content">
            <text class="message-text">{{ message.content }}</text>
            <text class="message-time">{{ message.time }}</text>
          </view>
        </view>

        <!-- 正在输入指示器 -->
        <view v-if="isTyping" class="typing-indicator">
          <view class="avatar ai">
            <image src="/static/logo.svg" mode="aspectFit" />
          </view>
          <view class="typing-dots">
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
        
        <!-- 滚动到底部的锚点 -->
        <view id="bottom-anchor" style="height: 1rpx; visibility: hidden;"></view>
      </view>
    </scroll-view>

  

    <!-- 输入区域 -->
    <view class="input-area">
      <view class="input-container">
        <textarea
          v-model="inputText"
          class="message-input"
          placeholder="输入你的问题..."
          :auto-height="true"
          :maxlength="2000"
          @confirm="sendMessage"
        />
        <view class="input-actions">
          <button class="action-icon" @tap="chooseFile">
            <text class="icon">📎</text>
          </button>
          <button class="send-btn" :disabled="!inputText.trim()" @tap="sendMessage">
            <text class="icon">➤</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputText: '',
      isTyping: false,
      scrollTop: 0,
      scrollIntoView: '',
      currentUser: {
        name: '用户',
        avatar: '👤'
      }
    }
  },
  onLoad() {
    // 检查登录状态
    this.checkLoginStatus()
    // 初始化消息
    this.messages = []
  },

  onShow() {
    // 每次显示页面时检查登录状态
    this.checkLoginStatus()
  },
  methods: {
    // 发送消息
    async sendMessage() {
      if (!this.inputText.trim()) return

      const userMessage = {
        type: 'user',
        content: this.inputText,
        time: this.getCurrentTime()
      }

      this.messages.push(userMessage)
      this.inputText = ''
      this.scrollToBottom()

      // 显示正在输入
      this.isTyping = true

      // 模拟AI回复
        setTimeout(() => {
          this.isTyping = false
          const aiMessage = {
            type: 'ai',
            content: this.generateAIResponse(userMessage.content),
            time: this.getCurrentTime()
          }
          this.messages.push(aiMessage)
          // 确保AI回复后滚动到底部
          this.$nextTick(() => {
            this.scrollToBottom()
          })
        }, 1500)
    },



    // 生成AI回复
    generateAIResponse(userInput) {
      const responses = [
        '我理解你的问题。让我为你详细解答...',
        '这是一个很好的问题。基于我的理解...',
        '我来帮你分析一下这个情况...',
        '根据最新的信息，我可以告诉你...',
        '让我为你提供一些有用的建议...'
      ]
      
      // 根据用户输入生成更相关的回复
      if (userInput.includes('你好') || userInput.includes('hi')) {
        return '你好！很高兴见到你，我是VKG AI助手。有什么我可以帮助你的吗？'
      } else if (userInput.includes('谢谢') || userInput.includes('感谢')) {
        return '不客气！能帮到你我也很开心。如果还有其他问题，随时问我哦。'
      } else if (userInput.includes('写') || userInput.includes('文章')) {
        return '我来为你写一篇关于这个主题的文章：\n\n人工智能正在深刻改变我们的生活方式。从智能助手到自动驾驶，从医疗诊断到教育学习，AI技术的应用无处不在。作为新一代的智能助手，我致力于为用户提供准确、有用的信息和帮助。'
      }
      
      return responses[Math.floor(Math.random() * responses.length)]
    },



    // 选择文件 - 三端适配
    chooseFile() {
      console.log('点击了文件上传按钮，当前平台:', uni.getSystemInfoSync().platform)
      
      // #ifdef MP-WEIXIN
      // 微信小程序
      uni.chooseMessageFile({
        count: 1,
        type: 'all',
        extension: ['.doc', '.docx', '.pdf', '.txt', '.jpg', '.png'],
        success: (res) => {
          console.log('微信小程序文件选择成功:', res)
          const file = res.tempFiles[0]
          this.handleFileUpload(file)
        },
        fail: (err) => {
          console.error('微信小程序选择文件失败:', err)
          uni.showToast({
            title: '文件选择失败',
            icon: 'none'
          })
        }
      })
      // #endif
      
      // #ifdef APP-PLUS
      // 安卓App
      plus.gallery.pick((path) => {
        console.log('App文件选择成功:', path)
        const file = {
          path: path,
          name: path.split('/').pop(),
          size: 0
        }
        this.handleFileUpload(file)
      }, (err) => {
        console.error('App选择文件失败:', err)
        uni.showToast({
          title: '文件选择失败',
          icon: 'none'
        })
      }, {
        filter: 'image',
        multiple: false
      })
      // #endif
      
      // #ifdef H5
      // H5页面
      uni.chooseFile({
        count: 1,
        type: 'all',
        extension: ['.doc', '.docx', '.pdf', '.txt', '.jpg', '.png'],
        success: (res) => {
          console.log('H5文件选择成功:', res)
          const file = res.tempFiles[0]
          this.handleFileUpload(file)
        },
        fail: (err) => {
          console.error('H5选择文件失败:', err)
          uni.showToast({
            title: '文件选择失败',
            icon: 'none'
          })
        }
      })
      // #endif
    },
    
    // 统一处理文件上传
    handleFileUpload(file) {
      const fileMessage = {
        type: 'user',
        content: `已上传文件：${file.name || '未知文件名'} (${this.formatFileSize(file.size || 0)})`,
        time: this.getCurrentTime()
      }
      this.messages.push(fileMessage)
      this.scrollToBottom()
      
      // 这里可以添加实际的文件上传逻辑
      // this.uploadFileToServer(file)
    },
    
    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },

    // 获取当前时间
    getCurrentTime() {
      const now = new Date()
      return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
    },

    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        // 使用scroll-into-view滚动到底部锚点
        this.scrollIntoView = 'bottom-anchor'
        
        // 确保滚动到底部 - 多次尝试确保生效
        setTimeout(() => {
          this.scrollIntoView = 'bottom-anchor'
        }, 100)
        
        setTimeout(() => {
          this.scrollIntoView = 'bottom-anchor'
        }, 300)
        
        setTimeout(() => {
          this.scrollIntoView = 'bottom-anchor'
        }, 500)
        
        // 重置scrollIntoView，以便下次可以再次使用
        setTimeout(() => {
          this.scrollIntoView = ''
        }, 600)
      })
    },

    // 加载更多消息
    loadMoreMessages() {
      console.log('加载更多消息')
    },

    // 检查登录状态
    checkLoginStatus() {
      const token = uni.getStorageSync('token')
      if (!token) {
        uni.reLaunch({
          url: '/pages/login/index'
        })
      }
    },

    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token')
            uni.removeStorageSync('userInfo')
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }
        }
      })
    },

    // 显示设置
    showSettings() {
      uni.showActionSheet({
        itemList: ['个人资料', '退出登录'],
        success: (res) => {
          switch(res.tapIndex) {
            case 0:
              this.showUserProfile()
              break
            case 1:
              this.logout()
              break
          }
        }
      })
    },
    
    // 显示个人资料
    showUserProfile() {
      uni.navigateTo({
        url: '/pages/user-profile/index'
      })
    },
    
    // 显示文件管理
    showFileManager() {
      uni.navigateTo({
        url: '/pages/file-manager/index'
      })
    }
  }
}
</script>

<style scoped>
.kimi-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部导航栏 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.navbar .nav-left {
  display: flex;
  align-items: center;
}

.navbar .nav-left .logo,
.navbar .nav-left .logo uni-image {
  width: 60rpx !important;
  height: 60rpx !important;
  margin-right: 20rpx;
  flex-shrink: 0;
  max-width: 60rpx !important;
  max-height: 60rpx !important;
  min-width: 60rpx !important;
  min-height: 60rpx !important;
  opacity: 0;
  animation: fadeIn 0.2s ease-in-out forwards;
}

.navbar .nav-left .title {
  font-size: 36rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.navbar .nav-left .file-manager-btn,
.navbar .nav-left uni-button.file-manager-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  color: #667eea !important;
  font-size: 40rpx;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar .nav-left .file-manager-btn .file-icon {
  font-size: 40rpx;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar .nav-right .nav-btn,
.navbar .nav-right uni-button.nav-btn,
.navbar .nav-right uni-button {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  color: white !important;
  font-size: 40rpx;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar .nav-right .nav-btn .icon,
.navbar .nav-right uni-button .icon {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar .nav-right .nav-btn .user-avatar,
.navbar .nav-right uni-button .user-avatar,
.navbar .nav-right .nav-btn .user-avatar uni-image,
.navbar .nav-right uni-button .user-avatar uni-image,
.navbar .nav-right .nav-btn .user-avatar image,
.navbar .nav-right uni-button .user-avatar image {
  width: 100rpx !important;
  height: 100rpx !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  max-width: 100rpx !important;
  max-height: 100rpx !important;
  display: block !important;
  overflow: hidden !important;
}

/* 聊天区域 */
.chat-area {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;
  min-height: 0;
}

/* 微信小程序不需要自定义滚动条样式 */

/* 欢迎区域 */
.welcome-section {
  text-align: center;
  padding: 100rpx 40rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.welcome-section .welcome-logo,
.welcome-section .welcome-logo uni-image {
  width: 120rpx !important;
  height: 120rpx !important;
  margin-bottom: 30rpx;
  flex-shrink: 0;
  max-width: 120rpx !important;
  max-height: 120rpx !important;
  min-width: 120rpx !important;
  min-height: 120rpx !important;
  opacity: 0;
  animation: fadeIn 0.2s ease-in-out forwards;
}

.welcome-section .welcome-text {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.welcome-section .welcome-subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

/* 消息样式 */
.message-item {
  display: flex;
  margin-bottom: 30rpx;
  align-items: flex-start;
}

.message-item.user {
  flex-direction: row-reverse;
}

.message-item.user .message-content {
  background: #667eea;
  color: white;
  margin-right: 20rpx;
}

.message-item.ai .message-content {
  background: white;
  color: #333;
  margin-left: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.message-item .avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

.message-item .avatar.ai {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.message-item .avatar.user {
  background: #ddd;
}

.message-item .avatar image,
.message-item .avatar uni-image {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  opacity: 0;
  animation: fadeIn 0.2s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.message-item .message-content {
  max-width: 70%;
  padding: 20rpx 25rpx;
  border-radius: 20rpx;
  position: relative;
}

.message-item .message-content .message-text {
  font-size: 30rpx;
  line-height: 1.5;
  word-break: break-word;
}

.message-item .message-content .message-time {
  display: block;
  font-size: 22rpx;
  margin-top: 10rpx;
  opacity: 0.7;
}

/* 正在输入指示器 */
.typing-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.typing-indicator .avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.typing-indicator .avatar image,
.typing-indicator .avatar uni-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 50%;
  opacity: 0;
  animation: fadeIn 0.2s ease-in-out forwards;
}

.typing-indicator .typing-dots {
  display: flex;
  margin-left: 20rpx;
  background: white;
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.typing-indicator .typing-dots .dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #667eea;
  margin: 0 4rpx;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator .typing-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator .typing-dots .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}



/* 输入区域 */
.input-area {
  background: white;
  border-top: 1rpx solid #eee;
  padding: 20rpx;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  max-height: 200rpx;
  overflow: hidden;
}

.input-container {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 20rpx;
  padding: 20rpx;
  max-height: 160rpx;
  overflow: hidden;
}

.input-container .message-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 30rpx;
        max-height: 120rpx;
        min-height: 80rpx;
        padding: 10rpx 0;
        overflow-y: auto;
        resize: none;
}

.input-container .input-actions {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.input-container .input-actions .action-icon,
.input-container .input-actions .send-btn {
  background: transparent;
  border: none;
  font-size: 40rpx;
  color: #667eea;
  padding: 10rpx;
  margin-left: 20rpx;
}

.input-container .input-actions .action-icon:disabled,
.input-container .input-actions .send-btn:disabled {
  opacity: 0.5;
}

.input-container .input-actions .send-btn {
  background: #667eea;
  color: white;
  border-radius: 50%;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 浏览器适配 - 桌面端优化 */
@media screen and (min-width: 768px) {
  .kimi-container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-shadow: none;
    max-width: none;
  }
  
  .navbar,
  .chat-area,
  .input-area {
    width: 100%;
    max-width: none;
  }
  
  .navbar {
    padding: 15px 30px;
  }
  
  .navbar .nav-left .logo {
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }
  
  .navbar .nav-left .title {
    font-size: 24px;
  }
  
  .chat-area {
    padding: 20px 30px;
  }
  
  .welcome-section {
    padding: 60px 40px;
  }
  
  .welcome-section .welcome-logo {
    width: 80px;
    height: 80px;
  }
  
  .welcome-section .welcome-text {
    font-size: 32px;
  }
  
  .welcome-section .welcome-subtitle {
    font-size: 18px;
  }
  
  .message-item .avatar {
    width: 45px;
    height: 45px;
    font-size: 24px;
  }
  
  .message-item .message-content {
    max-width: 60%;
    padding: 15px 20px;
    border-radius: 15px;
  }
  
  .message-item .message-content .message-text {
    font-size: 16px;
    line-height: 1.6;
  }
  
  .message-item .message-content .message-time {
    font-size: 14px;
  }
  
   
  
  .input-area {
    padding: 15px 30px;
  }
  
  .input-container {
    padding: 15px;
    border-radius: 15px;
    align-items: center;
  }
  
  .input-container .message-input {
    font-size: 16px;
    min-height: 50px;
    max-height: 80px;
    overflow-y: auto;
    resize: none;
  }
  
  .input-container .input-actions .action-icon,
  .input-container .input-actions .send-btn {
    font-size: 24px;
  }
  
  .input-container .input-actions .send-btn {
    width: 45px;
    height: 45px;
  }
}

/* 超大屏适配 - 完全填充 */
@media screen and (min-width: 1200px) {
  .kimi-container {
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  
  .navbar,
  .chat-area,
  .quick-actions,
  .input-area {
    width: 100%;
    max-width: none;
  }
}

/* 移动端优化 - 小屏幕适配 */
@media screen and (max-width: 480px) {
  .kimi-container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
  
  .navbar {
    padding: 15rpx 20rpx;
    height: 100rpx;
  }
  
  .navbar .nav-left .logo {
    width: 60rpx;
    height: 60rpx;
    margin-right: 15rpx;
  }
  
  .navbar .nav-left .title {
    font-size: 36rpx;
  }
  
  .navbar .nav-right .nav-btn,
  .navbar .nav-right uni-button.nav-btn,
  .navbar .nav-right uni-button {
    padding: 0 !important;
    font-size: 34rpx;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    color: white !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar .nav-right .nav-btn .icon,
  .navbar .nav-right uni-button .icon {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .navbar .nav-right .nav-btn .user-avatar,
  .navbar .nav-right uni-button .user-avatar,
  .navbar .nav-right .nav-btn .user-avatar uni-image,
  .navbar .nav-right uni-button .user-avatar uni-image,
  .navbar .nav-right .nav-btn .user-avatar image,
  .navbar .nav-right uni-button .user-avatar image {
    width: 100rpx !important;
    height: 100rpx !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    max-width: 100rpx !important;
    max-height: 100rpx !important;
    display: block !important;
    overflow: hidden !important;
  }
  
  .chat-area {
    padding: 20rpx;
    height: calc(100vh - 100rpx - 200rpx - 150rpx);
  }
  
  .welcome-section {
    padding: 40rpx 20rpx;
  }
  
  .welcome-section .welcome-logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
  }
  
  .welcome-section .welcome-text {
    font-size: 36rpx;
  }
  
  .welcome-section .welcome-subtitle {
    font-size: 28rpx;
  }
  
  .message-item {
    margin-bottom: 30rpx;
  }
  
  .message-item .avatar {
    width: 70rpx;
    height: 70rpx;
    font-size: 40rpx;
  }
  
  .message-item .message-content {
    max-width: 75%;
    padding: 25rpx;
    border-radius: 20rpx;
  }
  
  .message-item .message-content .message-text {
    font-size: 28rpx;
    line-height: 1.5;
  }
  
  .message-item .message-content .message-time {
    font-size: 22rpx;
    margin-top: 15rpx;
  }
  
  .input-area {
    padding: 20rpx;
  }
  
  .input-container {
    padding: 20rpx;
    border-radius: 40rpx;
    align-items: center;
  }
  
  .input-container .message-input {
    font-size: 28rpx;
    min-height: 80rpx;
    max-height: 100rpx;
    overflow-y: auto;
    resize: none;
  }
  
  .input-container .input-actions {
    margin-left: 10rpx;
  }
  
  .input-container .input-actions .action-icon,
  .input-container .input-actions .send-btn {
    font-size: 34rpx;
    padding: 10rpx;
    margin-left: 10rpx;
  }
  
  .input-container .input-actions .send-btn {
    width: 55rpx;
    height: 55rpx;
  }
}

/* 超小屏幕优化 */
@media screen and (max-width: 375px) {
  .navbar {
    padding: 10rpx 15rpx;
    height: 90rpx;
  }
  
  .navbar .nav-right .nav-btn .user-avatar,
  .navbar .nav-right uni-button .user-avatar,
  .navbar .nav-right .nav-btn .user-avatar uni-image,
  .navbar .nav-right uni-button .user-avatar uni-image,
  .navbar .nav-right .nav-btn .user-avatar image,
  .navbar .nav-right uni-button .user-avatar image {
    width: 100rpx !important;
    height: 100rpx !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    max-width: 100rpx !important;
    max-height: 100rpx !important;
    display: block !important;
    overflow: hidden !important;
  }
  
  .navbar .nav-left .logo {
    width: 50rpx;
    height: 50rpx;
    margin-right: 10rpx;
  }
  
  .navbar .nav-left .title {
    font-size: 32rpx;
  }
  
  .navbar .nav-left .file-manager-btn .file-icon {
    font-size: 32rpx;
  }
  
  .chat-area {
    padding: 15rpx;
    height: calc(100vh - 90rpx - 180rpx - 120rpx);
  }
  
  .welcome-section {
    padding: 30rpx 15rpx;
  }
  
  .welcome-section .welcome-logo {
    width: 100rpx;
    height: 100rpx;
  }
  
  .welcome-section .welcome-text {
    font-size: 32rpx;
  }
  
  .welcome-section .welcome-subtitle {
    font-size: 24rpx;
  }
  
  .message-item .avatar {
    width: 60rpx;
    height: 60rpx;
    font-size: 32rpx;
  }
  
  .message-item .message-content {
    max-width: 80%;
    padding: 20rpx;
  }
  
  .message-item .message-content .message-text {
    font-size: 26rpx;
  }
  
  .input-container {
    padding: 12rpx;
    border-radius: 35rpx;
    align-items: center;
  }
  
  .input-container .message-input {
    font-size: 24rpx;
    min-height: 65rpx;
    overflow-y: auto;
    resize: none;
  }
}

/* 防止内容溢出 - 微信小程序兼容写法 */
view, text, input, button, image {
  max-width: 100%;
  overflow-wrap: break-word;
  box-sizing: border-box;
}</style>